<template>
	<div class="home_page">
		<h1>健康指数</h1>
		<p>国家健康指数为综合衡量一个国家发展状况、发展模式和治理结构等提供了一个新视角和新维度。</p>
		<div class="home_content">
			<div class="tab_header">
				<span @click="tabToggle('tab-container1', 1)" :class="{active_tab: active_tab1}">检测结果</span>
				<span @click="tabToggle('tab-container2', 2)" :class="{active_tab: active_tab2}">科学依据</span>
			</div>
			<mt-tab-container v-model="active">
				<mt-tab-container-item id="tab-container1">
					<div class="jieguo" style="padding-bottom: 40px;">
						<h3 style="padding: 18px 0;font-weight: 400;">我的检测结果</h3>
						<div class="j_show_num">
							<div class="" style="color: #dddddd;letter-spacing: 1px;">
								我的健康指数
							</div>
							<div class="" style="color: #25ef25; font-size: 34px;font-weight: 600;line-height: 2em;">
								00.0
							</div>
						</div>
						<h3>综合评价</h3>
						<p>
							<span style="color: #25ef25;">健康：</span> 您的肠道保持稳定和谐状态，不容易受外界因素的干扰使肠道菌落中的成员比例失调。
						</p>
						<div class="jieguo_wrap">
							<div style="height: 80px; background: green;line-height: 80px; text-align: center;border-radius: 10px;">
								<img src="../../assets/images/home1.png" style="width: 100%;" />
							</div>
							<div style="line-height: 3em;">
								<span>项目</span>
								<span>结果</span>
							</div>
							<p>
								<span>菌群结构分析</span>
								<span>
									<router-link :to="{name: 'Detail'}">
									健康 >>
									</router-link>
								</span>
							</p>
							<p>
								<span>拟杆菌门与厚壁菌门比值</span>

								<span>
									<router-link :to="{name: 'Detail'}">
									比值高 >>
									</router-link>
								</span>
							</p>
							<p>
								<span>菌群多样性</span>
								<span>
									<router-link :to="{name: 'Detail'}">
									多样性指数高 >>
									</router-link>
								</span>
							</p>
							<p>
								<span>肠龄</span>
								<span>
									<router-link :to="{name: 'Detail'}">
									25岁 >>
									</router-link>
								</span>
							</p>
							<p>
								<span>肠型分类</span>
								<span>
									<router-link :to="{name: 'Detail'}">
									拟杆菌型 >>
									</router-link>
								</span>
							</p>
							<p>
								<span>有益菌类型</span>
								<span>
									<router-link :to="{name: 'Detail'}">
									7项指标 >>
									</router-link>
								</span>
							</p>
						</div>
						<div class="jieguo_wrap">
							<div style="height: 80px; background: green;line-height: 80px; text-align: center;border-radius: 10px;">
								<img src="../../assets/images/home2.png" style="width: 100%;" />
							</div>
							<div style="line-height: 3em;">
								<span>项目</span>
								<span>结果</span>
							</div>
							<p>
								<span>能量代谢</span>
								<span>
									<router-link :to="{name: 'Detail'}">
									旺盛 >>
									</router-link>
								</span>
							</p>
							<p>
								<span>糖类代谢</span>
								<span>
									<router-link :to="{name: 'Detail'}">
									旺盛 >>
									</router-link>
								</span>
							</p>
							<p>
								<span>脂类代谢</span>
								<span style="color: #e4b322;">
									<router-link :to="{name: 'Detail'}">
									适中 >>
									</router-link>
								</span>
							</p>
							<p>
								<span>蛋白质代谢</span>
								<span style="color: #fb4b14;">
									<router-link :to="{name: 'Detail'}">
									低下 >>
									</router-link>
								</span>
							</p>
						</div>
						<div class="jieguo_wrap">
							<div style="height: 80px; background: green;line-height: 80px; text-align: center;border-radius: 10px;">
								<img src="../../assets/images/home3.png" style="width: 100%;" />
							</div>
							<div style="line-height: 3em;">
								<span>项目</span>
								<span>结果</span>
							</div>
							<p>
								<span>维生素合成</span>
								<span>
									<router-link :to="{name: 'Detail'}">
									旺盛 >>
									</router-link>
								</span>
							</p>
							<p>
								<span>短链脂肪酸合成</span>
								<span>
									<router-link :to="{name: 'Detail'}">
									旺盛 >>
									</router-link>
								</span>
							</p>
							<p>
								<span>氨基酸合成</span>
								<span style="color: #e4b322;">
									<router-link :to="{name: 'Detail'}">
									适中 >>
									</router-link>
								</span>
							</p>
						</div>
						<div class="jieguo_wrap">
							<div style="height: 80px; background: green;line-height: 80px; text-align: center;border-radius: 10px;">
								<img src="../../assets/images/home4.png" style="width: 100%;" />
							</div>
							<div style="line-height: 3em;">
								<span>项目</span>
								<span>结果</span>
							</div>
							<p>
								<span>脂多糖（LPS）生物合成</span>
								<span>
									<router-link :to="{name: 'Detail'}">
									旺盛 >>
									</router-link>
								</span>
							</p>
							<p>
								<span>硫化氢（H2S）生物合成</span>
								<span>
									<router-link :to="{name: 'Detail'}">
										旺盛 >>
									</router-link>
								</span>
							</p>
							<p>
								<span>氧化压力抵抗</span>
								<span style="color: #e4b322;">
									<router-link :to="{name: 'Detail'}">
									适中 >>
									</router-link>
								</span>
							</p>
						</div>
						<div class="jieguo_wrap">
							<div style="height: 80px; background: green;line-height: 80px; text-align: center;border-radius: 10px;">
								<img src="../../assets/images/home5.png" style="width: 100%;" />
							</div>
							<div style="line-height: 3em;">
								<span>项目</span>
								<span>结果</span>
							</div>
							<p>
								<span>||型糖尿病</span>
								<span>
									<router-link :to="{name: 'Detail'}">
									低 >>
									</router-link>
								</span>
							</p>
							<p>
								<span>结直肠癌</span>
								<span>
									<router-link :to="{name: 'Detail'}">
									
									低 >>
									</router-link>
									
								</span>
							</p>
							<p>
								<span>炎症性疾病</span>
								<span style="color: #e4b322;">
									<router-link :to="{name: 'Detail'}">
									
									中 >>
									</router-link>
									
								</span>
							</p>
							<p>
								<span>抑郁症</span>
								<span style="color: #e4b322;">
									<router-link :to="{name: 'Detail'}">
									
									中 >>
									</router-link>
								</span>
							</p>
							<p>
								<span>肥胖</span>
								<span style="color: #fb4b14;">
									<router-link :to="{name: 'Detail'}">
									
									低 >>
									</router-link>
									
								</span>
							</p>
						</div>
					</div>
				</mt-tab-container-item>
				<mt-tab-container-item id="tab-container2">
					<div class="padding_bot40">
						<div class="kuai_wrap">
							<h3>肠道菌群检测</h3>
							<div class="" style="overflow: hidden;">
								<div class="rRNA_wrap" style="width: 30%; float: left;">
									<img src="../../assets/images/detail1.png" style="width: 100%;" />
									<p style="text-align: center; color: #999999;">16S rRNA</p>
								</div>
								<div class="" style="width: 69%; float: left;">
									<p>16S rRNA</p>
									<p>16S rRNA 肠道菌群检测 即采集人体粪便样本，通过第二代高量测序（N G S）检测菌群的基因。是第一款针对东亚体设计全组芯片，并为中国进行了特别优化，可用于探索族群起源研究遗传相关的形状与疾病。</p>
								</div>
							</div>
						</div>
						<div class="kuai_wrap">
							<h3>关于肠道微生物</h3>
							<p>人体的皮肤、鼻腔口和肠道内寄居了大量微生物，被称为“人体微生态”（Human Microbiota）。其中，以肠道内的微生物数量最多。虽然占人体重比例只有2%左右，但数量是人体细胞的10倍。诺贝尔奖得主里德伯格（J.Lederberg）提出“人是与共生微物构成的超级生物（superorganism）”, 人基因组和微生物共同作用影响人体的免疫、营养代谢过程。</p>
						</div>
						<div class="kuai_wrap">
							<h3>亦敌友的人体微生物</h3>
							<p>肠道微生物与人体、既是朋友————它可以在一定程度上弥补人体内生理过的不足，例如代谢无法消化纤维素、产生短链脂肪酸和等，能够促进肠上皮免疫系统发育帮助维持组织稳态；但有时也是敌人————除急性感染外，有些肠道微生物还与疾病状态密切相关，例如糖尿、肥胖、结直癌、炎症性疾病、抑郁症。</p>
						</div>
					</div>
				</mt-tab-container-item>
			</mt-tab-container>
		</div>
	</div>
</template>

<script>
	import { Toast } from 'mint-ui';
	export default {
		data() {
			return {
				active: 'tab-container1',
				active_tab1: true,
				active_tab2: false,
			}
		},
		created() {},
		methods: {
			tabToggle(tab, num) {
				this.active = tab
				if(num == 1) {
					this.active_tab1 = true
					this.active_tab2 = false
				} else {
					this.active_tab2 = true
					this.active_tab1 = false
				}
			},

		},
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.home_page {
		height: 100%;
		padding: 15px 25px;
	}
	
	.home_content {
		padding-top: 15px;
	}
	
	.tab_header {
		border-bottom: 2px solid;
	}
	
	.tab_header span {
		display: inline-block;
		width: 49%;
		text-align: center;
	}
	
	.tab_header span.active_tab {
		/*background: #4cdcec;*/
		background: #7ecef4;
		color: #032529;
		opacity: .3;
	}
	
	.home_page h1 {
		text-align: center;
		padding-bottom: 25px;
		font-weight: 400;
	}
	
	.kuai_wrap {
		padding-top: 18px;
	}
	
	.kuai_wrap h3 {
		font-weight: 400;
		display: inline-block;
		padding: 3px 12px;
		color: #fff;
		border-radius: 7px;
		line-height: 1.5em;
		margin: 13px 0;
	}
	
	.kuai_wrap:nth-child(1) h3 {
		/*background: #ffed00;*/
		background: #ffd162;
	}
	
	.kuai_wrap:nth-child(2) h3 {
		/*background: #000;*/
		background: #ffaf74;
	}
	
	.kuai_wrap:nth-child(3) h3 {
		/*background: #ff3d00;*/
		background: #fe9592;
	}
	
	.jieguo h3 {
		font-weight: 400;
		line-height: 1.5em;
		font-size: 22px;
	}
	
	.j_show_num {
		/*background: #032529;*/
		background: #31415d;
		border-radius: 8px;
		text-align: center;
		padding: 20px 0 10px 0;
		margin-bottom: 18px;
	}
	
	.jieguo_wrap {
		padding-top: 20px;
	}
	
	.jieguo_wrap p {
		overflow: hidden;
		line-height: 3em;
		border-bottom: 1px solid #ddd;
	}
	
	.jieguo_wrap>div {
		overflow: hidden;
	}
	
	.jieguo_wrap div span:nth-child(1) {
		float: left;
	}
	
	.jieguo_wrap div span:nth-child(2) {
		float: right;
	}
	
	.jieguo_wrap p span:nth-child(1) {
		float: left;
	}
	
	.jieguo_wrap p span:nth-child(2) {
		float: right;
		color: #25ef25;
	}
	
	.jieguo_wrap p span a {
		color: inherit;
		text-decoration: none;
	}
	
	.rRNA_wrap {
		padding-top: 50px;
		margin-right: 0px;
		padding-right: 10px;
		width: 30%;
		float: left;
		box-sizing: border-box;
	}
	.padding_bot40 {
		padding-bottom: 40px;
	}
</style>